<template>
  <div class="zone-authorization bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-4">分区授权</h2>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="区域管理" name="区域管理">
        <!-- Search Bar -->
        <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
          <!-- <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
              <label for="staffName" class="block text-sm font-medium text-muted-foreground">人员姓名：</label>
              <input type="text" id="staffName" v-model="search.staff_name" placeholder="请输入" class="input">
            </div>
            <div>
              <label for="idNumber" class="block text-sm font-medium text-muted-foreground">身份证号：</label>
              <input type="text" id="idNumber" v-model="search.id_number" placeholder="请输入" class="input">
            </div>
            <div>
              <label for="zoneName" class="block text-sm font-medium text-muted-foreground">区域名称：</label>
              <input type="text" id="zoneName" v-model="search.zone_name" placeholder="请输入" class="input">
            </div>
            <div>
              <label for="authorizationStatus" class="block text-sm font-medium text-muted-foreground">授权状态：</label>
              <select id="authorizationStatus" v-model="search.authorization_status" class="input">
                <option value="">全部</option>
                <option value="已授权">已授权</option>
                <option value="未授权">未授权</option>
              </select>
            </div>
            <div class="flex justify-end mt-6 space-x-2">
              <button @click="searchAuthorizations" class="btn btn-primary">查询</button>
              <button @click="resetSearch" class="btn btn-secondary">重置</button>
            </div>
          </div> -->
          <query-form :model="region" :formItems="regionItems" @search="searchRegion" @reset="resetRegion" />
        </div>

        <!-- Action Buttons -->
        <div class="mb-4 space-x-2">
          <!-- <button @click="openAddDialog" class="btn btn-primary">新增</button>
          <button @click="deleteSelected" class="btn btn-destructive">删除</button>
          <button @click="batchAuthorize" class="btn btn-secondary">批量授权</button>
          <button @click="batchDeauthorize" class="btn btn-secondary">批量取消授权</button> -->
          <el-button type="primary" @click="openAddDialog" style="width: 75px; height: 30px;">新增</el-button>
          <el-button @click="deleteSelected" style="width: 75px; height: 30px;">删除</el-button>
        </div>

        <!-- Data Table -->
        <div class="bg-card text-card-foreground shadow-md rounded my-6">
          <!-- <table class="min-w-full table-auto">
            <thead>
              <tr class="bg-muted text-muted-foreground text-sm leading-normal">
                <th class="py-3 px-6 text-left">
                  <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" class="checkbox">
                </th>
                <th class="py-3 px-6 text-left">人员编码</th>
                <th class="py-3 px-6 text-left">人员姓名</th>
                <th class="py-3 px-6 text-left">身份证号</th>
                <th class="py-3 px-6 text-left">区域名称</th>
                <th class="py-3 px-6 text-left">授权类型</th>
                <th class="py-3 px-6 text-left">开始时间</th>
                <th class="py-3 px-6 text-left">结束时间</th>
                <th class="py-3 px-6 text-left">授权状态</th>
                <th class="py-3 px-6 text-left">授权原因</th>
                <th class="py-3 px-6 text-left">操作</th>
              </tr>
            </thead>
            <tbody class="text-sm">
              <tr v-for="item in displayedAuthorizations" :key="item.id"
                class="border-b border-border hover:bg-muted/50">
                <td class="py-3 px-6 text-left">
                  <input type="checkbox" v-model="item.selected" class="checkbox">
                </td>
                <td class="py-3 px-6 text-left">{{ item.staff_code }}</td>
                <td class="py-3 px-6 text-left">{{ item.staff_name }}</td>
                <td class="py-3 px-6 text-left">{{ item.id_number }}</td>
                <td class="py-3 px-6 text-left">{{ item.zone_name }}</td>
                <td class="py-3 px-6 text-left">{{ item.authorization_type }}</td>
                <td class="py-3 px-6 text-left">{{ formatDateTime(item.start_time) }}</td>
                <td class="py-3 px-6 text-left">{{ formatDateTime(item.end_time) }}</td>
                <td class="py-3 px-6 text-left">
                  <span :class="getStatusClass(item.authorization_status)">
                    {{ item.authorization_status }}
                  </span>
                </td>
                <td class="py-3 px-6 text-left">{{ item.reason }}</td>
                <td class="py-3 px-6 text-left">
              <button @click="editAuthorization(item)" class="btn btn-sm btn-secondary mr-2">编辑</button>
              <button @click="viewDetails(item)" class="btn btn-sm btn-secondary">查看</button>
            </td>
              </tr>
            </tbody>
          </table> -->
          <el-table v-loading="loading" :data="displayedRegionData" style="width: 100%"
            @selection-change="handleSelectionChange" ref="tableRef" align="center" class="data-table"
            :header-cell-style="headerCellStyle" empty-text="暂无数据" :row-key="rowKey">
            <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
            <el-table-column label="序号" width="55" header-align="center" align="center">
              <template #default="scope">
                {{ startIndex + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="STAFF_CODE" label="区域编码" header-align="center" align="center"></el-table-column>
            <el-table-column prop="ZONE_NAME" label="区域名称" header-align="center" align="center"></el-table-column>
            <el-table-column prop="ZONE_TYPE" label="区域性质" header-align="center" align="center"></el-table-column>
            <el-table-column prop="ZONE_AREA" label="区域面积（M²）" header-align="center" align="center"></el-table-column>
            <el-table-column prop="ZONE_LOCATION" label="区域位置" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="editItem(scope.row)" link>编辑</el-button>
                <!-- <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- Pagination -->
        <div
          class="flex items-center justify-between px-4 py-3 bg-card text-card-foreground border-t border-border sm:px-6">
          <div>
            <p class="text-sm text-muted-foreground">
              一共检索到 <span class="font-medium total-num">{{ totalItems }}</span> 条信息
            </p>
          </div>
          <div class="flex items-center space-x-2">
            <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-secondary btn-sm"
              :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
              上一页
            </button>
            <span class="text-sm text-muted-foreground">
              {{ currentPage }} / {{ totalPages }}
            </span>
            <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-secondary btn-sm"
              :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }">
              下一页
            </button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="人员/车辆授权管理" name="人员/车辆授权管理">
        <el-tabs v-model="activeTwoName" class="demo-tabs" @tab-change="handleTwoClick">
          <el-tab-pane label="人员授权管理" name="人员授权管理">
            <!-- Search Bar -->
            <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
              <query-form :model="staff" :formItems="staffItems" @search="searchStaff" @reset="resetStaff" />
            </div>
            <!-- Data Table -->
            <div class="bg-card text-card-foreground shadow-md rounded my-6">
              <el-table v-loading="loading" :data="displayedStaffData" style="width: 100%" align="center"
                class="data-table" :header-cell-style="headerCellStyle" empty-text="暂无数据" :row-key="rowKey">
                <!-- <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column> -->
                <el-table-column label="序号" width="55" header-align="center" align="center">
                  <template #default="scope">
                    {{ startIndexStaff + scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="STAFF_CODE" label="人员编码" header-align="center" align="center"></el-table-column>
                <el-table-column prop="STAFF_NAME" label="人员姓名" header-align="center" align="center"></el-table-column>
                <el-table-column prop="ID_CARD" label="证件号码" header-align="center" align="center"></el-table-column>
                <!-- <el-table-column prop="zone_area" label="人员类型" header-align="center" align="center"></el-table-column>
                <el-table-column prop="zone_location" label="区域位置" header-align="center"
                  align="center"></el-table-column> -->
                <el-table-column label="操作" header-align="center" align="center">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="authorize(scope.row)" link>授权</el-button>
                    <!-- <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- Pagination -->
            <div
              class="flex items-center justify-between px-4 py-3 bg-card text-card-foreground border-t border-border sm:px-6">
              <div>
                <p class="text-sm text-muted-foreground">
                  一共检索到 <span class="font-medium total-num">{{ totalItemsStaff }}</span> 条信息
                </p>
              </div>
              <div class="flex items-center space-x-2">
                <button @click="prevPageStaff" :disabled="currentPageStaff === 1" class="btn btn-secondary btn-sm"
                  :class="{ 'opacity-50 cursor-not-allowed': currentPageStaff === 1 }">
                  上一页
                </button>
                <span class="text-sm text-muted-foreground">
                  {{ currentPageStaff }} / {{ totalPagesStaff }}
                </span>
                <button @click="nextPageStaff" :disabled="currentPageStaff === totalPagesStaff"
                  class="btn btn-secondary btn-sm"
                  :class="{ 'opacity-50 cursor-not-allowed': currentPageStaff === totalPagesStaff }">
                  下一页
                </button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="车辆授权管理" name="车辆授权管理">
            <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
              <query-form :model="carSquest" :formItems="carItems" @search="searchCar" @reset="resetCar" />
            </div>
            <!-- Data Table -->
            <div class="bg-card text-card-foreground shadow-md rounded my-6">
              <el-table v-loading="loading" :data="displayedCarData" style="width: 100%" align="center"
                class="data-table" :header-cell-style="headerCellStyle" empty-text="暂无数据" :row-key="rowKey">
                <!-- <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column> -->
                <el-table-column label="序号" width="55" header-align="center" align="center">
                  <template #default="scope">
                    {{ startIndexCar + scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="PLATE_NUMBER" label="车牌号码" header-align="center"
                  align="center"></el-table-column>
                <el-table-column prop="DRIVER_NAME" label="驾驶员姓名" header-align="center"
                  align="center"></el-table-column>
                <el-table-column prop="VEHICLE_TYPE" label="车辆类型" header-align="center"
                  align="center"></el-table-column>
                <el-table-column label="操作" header-align="center" align="center">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="authorizeCar(scope.row)" link>授权</el-button>
                    <!-- <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- Pagination -->
            <div
              class="flex items-center justify-between px-4 py-3 bg-card text-card-foreground border-t border-border sm:px-6">
              <div>
                <p class="text-sm text-muted-foreground">
                  一共检索到 <span class="font-medium total-num">{{ totalItemsCar }}</span> 条信息
                </p>
              </div>
              <div class="flex items-center space-x-2">
                <button @click="prevPageCar" :disabled="currentPageCar === 1" class="btn btn-secondary btn-sm"
                  :class="{ 'opacity-50 cursor-not-allowed': currentPageCar === 1 }">
                  上一页
                </button>
                <span class="text-sm text-muted-foreground">
                  {{ currentPageCar }} / {{ totalPagesCar }}
                </span>
                <button @click="nextPageCar" :disabled="currentPageCar === totalPagesCar"
                  class="btn btn-secondary btn-sm"
                  :class="{ 'opacity-50 cursor-not-allowed': currentPageCar === totalPagesCar }">
                  下一页
                </button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="授权记录" name="授权记录">
        <el-tabs v-model="activeThreeName" class="demo-tabs" @tab-change="handleThreeClick">
          <el-tab-pane label="人员授权记录" name="人员授权记录">
            <!-- Search Bar -->
            <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
              <query-form :model="staff" :formItems="staffItems" @search="searchStaffRecord"
                @reset="resetStaffRecord" />
            </div>
            <!-- Data Table -->
            <div class="bg-card text-card-foreground shadow-md rounded my-6">
              <el-table v-loading="loading" :data="displayedStaffDataRecord" style="width: 100%" align="center"
                class="data-table" :header-cell-style="headerCellStyle" empty-text="暂无数据" :row-key="rowKey">
                <!-- <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column> -->
                <el-table-column label="序号" width="55" header-align="center" align="center">
                  <template #default="scope">
                    {{ startIndexStaffRecord + scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="STAFF_CODE" label="人员编码" header-align="center" align="center"></el-table-column>
                <el-table-column prop="STAFF_NAME" label="人员姓名" header-align="center" align="center"></el-table-column>
                <el-table-column prop="ID_CARD" label="证件号码" header-align="center" align="center"></el-table-column>
                <!-- <el-table-column label="操作" header-align="center" align="center">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="authorize(scope.row)" link>授权</el-button>
                    <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button>
                  </template>
                </el-table-column> -->
                <el-table-column prop="personArray" label="通行起止时间" header-align="center" align="center">
                  <template #default="scope">
                    <div v-for="(item, index) in scope.row.personArray" :key="index">
                      {{ formatDateTime(item.startTime) }} - {{ formatDateTime(item.endTime) }}
                    </div>
                    <!-- {{ scope.row.personArray }} -->
                  </template>
                </el-table-column>
                <el-table-column prop="personArray" label="授权区域" header-align="center" align="center">
                  <template #default="scope">
                    <div v-for="(item, index) in scope.row.personArray" :key="index">
                      {{ item.staff_name }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- Pagination -->
            <div
              class="flex items-center justify-between px-4 py-3 bg-card text-card-foreground border-t border-border sm:px-6">
              <div>
                <p class="text-sm text-muted-foreground">
                  一共检索到 <span class="font-medium total-num">{{ totalItemsStaffRecord }}</span> 条信息
                </p>
              </div>
              <div class="flex items-center space-x-2">
                <button @click="prevPageStaffRecord" :disabled="currentPageStaffRecord === 1"
                  class="btn btn-secondary btn-sm"
                  :class="{ 'opacity-50 cursor-not-allowed': currentPageStaffRecord === 1 }">
                  上一页
                </button>
                <span class="text-sm text-muted-foreground">
                  {{ currentPageStaffRecord }} / {{ totalPagesStaffRecord }}
                </span>
                <button @click="nextPageStaffRecord" :disabled="currentPageStaffRecord === totalPagesStaffRecord"
                  class="btn btn-secondary btn-sm"
                  :class="{ 'opacity-50 cursor-not-allowed': currentPageStaffRecord === totalPagesStaffRecord }">
                  下一页
                </button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="车辆授权记录" name="车辆授权记录">
            <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
              <query-form :model="carSquest" :formItems="carItems" @search="searchCarRecord" @reset="resetCarRecord" />
            </div>
            <!-- Data Table -->
            <div class="bg-card text-card-foreground shadow-md rounded my-6">
              <el-table v-loading="loading" :data="displayedCarDataRecord" style="width: 100%" align="center"
                class="data-table" :header-cell-style="headerCellStyle" empty-text="暂无数据" :row-key="rowKey">
                <el-table-column label="序号" width="55" header-align="center" align="center">
                  <template #default="scope">
                    {{ startIndexCarRecord + scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="PLATE_NUMBER" label="车牌号码" header-align="center"
                  align="center"></el-table-column>
                <el-table-column prop="DRIVER_NAME" label="驾驶员姓名" header-align="center"
                  align="center"></el-table-column>
                <el-table-column prop="VEHICLE_TYPE" label="车辆类型" header-align="center"
                  align="center"></el-table-column>
                <el-table-column prop="CarArray" label="通行起止时间" header-align="center" align="center">
                  <template #default="scope">
                    <div v-for="(item, index) in scope.row.CarArray" :key="index">
                      {{ formatDateTime(item.startTime) }} - {{ formatDateTime(item.endTime) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="CarArray" label="授权区域" header-align="center" align="center">
                  <template #default="scope">
                    <div v-for="(item, index) in scope.row.CarArray" :key="index">
                      {{ item.staff_name }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- Pagination -->
              <div
                class="flex items-center justify-between px-4 py-3 bg-card text-card-foreground border-t border-border sm:px-6">
                <div>
                  <p class="text-sm text-muted-foreground">
                    一共检索到 <span class="font-medium total-num">{{ totalItemsCarRecord }}</span> 条信息
                  </p>
                </div>
                <div class="flex items-center space-x-2">
                  <button @click="prevPageCarRecord" :disabled="currentPageCarRecord === 1"
                    class="btn btn-secondary btn-sm"
                    :class="{ 'opacity-50 cursor-not-allowed': currentPageCarRecord === 1 }">
                    上一页
                  </button>
                  <span class="text-sm text-muted-foreground">
                    {{ currentPageCarRecord }} / {{ totalPagesCarRecord }}
                  </span>
                  <button @click="nextPageCarRecord" :disabled="currentPageCarRecord === totalPagesCarRecord"
                    class="btn btn-secondary btn-sm"
                    :class="{ 'opacity-50 cursor-not-allowed': currentPageCarRecord === totalPagesCarRecord }">
                    下一页
                  </button>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>


    <!-- Add/Edit Dialog -->
    <!-- <Teleport to="body">
      <div v-if="isDialogOpen" class="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center">
        <div class="bg-card text-card-foreground p-5 rounded-lg shadow-xl w-[500px]">
          <h3 class="text-lg font-bold mb-4">{{ isEditing ? '编辑授权' : '新增授权' }}</h3>
          <form @submit.prevent="handleSubmit">
            <div class="space-y-4">
              <div>
                <label for="staffCode" class="block text-sm font-medium text-muted-foreground">人员编码：</label>
                <input type="text" id="staffCode" v-model="formData.staff_code" required class="input">
              </div>
              <div>
                <label for="staffName" class="block text-sm font-medium text-muted-foreground">人员姓名：</label>
                <input type="text" id="staffName" v-model="formData.staff_name" required class="input">
              </div>
              <div>
                <label for="idNumber" class="block text-sm font-medium text-muted-foreground">身份证号：</label>
                <input type="text" id="idNumber" v-model="formData.id_number" required class="input">
              </div>
              <div>
                <label for="zoneName" class="block text-sm font-medium text-muted-foreground">区域名称：</label>
                <input type="text" id="zoneName" v-model="formData.zone_name" required class="input">
              </div>
              <div>
                <label for="authorizationType" class="block text-sm font-medium text-muted-foreground">授权类型：</label>
                <select id="authorizationType" v-model="formData.authorization_type" required class="input">
                  <option value="临时">临时</option>
                  <option value="长期">长期</option>
                </select>
              </div>
              <div>
                <label for="startTime" class="block text-sm font-medium text-muted-foreground">开始时间：</label>
                <input type="datetime-local" id="startTime" v-model="formData.start_time" required class="input">
              </div>
              <div>
                <label for="endTime" class="block text-sm font-medium text-muted-foreground">结束时间：</label>
                <input type="datetime-local" id="endTime" v-model="formData.end_time"
                  :required="formData.authorization_type === '临时'" class="input">
              </div>
              <div>
                <label for="authorizationStatus" class="block text-sm font-medium text-muted-foreground">授权状态：</label>
                <select id="authorizationStatus" v-model="formData.authorization_status" required class="input">
                  <option value="已授权">已授权</option>
                  <option value="未授权">未授权</option>
                </select>
              </div>
              <div>
                <label for="reason" class="block text-sm font-medium text-muted-foreground">授权原因：</label>
                <textarea id="reason" v-model="formData.reason" required class="input"></textarea>
              </div>
            </div>
            <div class="mt-4 flex justify-end space-x-2">
              <button type="button" @click="closeDialog" class="btn btn-secondary">取消</button>
              <button type="submit" class="btn btn-primary">确认</button>
            </div>
          </form>
        </div>
      </div>
    </Teleport> -->
    <el-dialog class="dialog-from" v-model="isDialogOpen" :title="isDialogType == 'add' ? '分区新增' : '分区编辑'" width="900"
      destroy-on-close align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <el-form :model="formData" label-width="auto" :rules="rules" ref="formRef">
            <el-row :gutter="80" class="row-item">
              <el-col :span="8">
                <el-form-item label="区域编码：" label-position="top" prop="STAFF_CODE">
                  <el-input v-model="formData.STAFF_CODE" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区域名称：" label-position="top" prop="ZONE_NAME">
                  <el-input v-model="formData.ZONE_NAME" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区域性质：" label-position="top" prop="ZONE_TYPE">
                  <el-select v-model="formData.ZONE_TYPE" placeholder="请选择" clearable>
                    <el-option label="煤化工园区" value="煤化工园区" />
                    <el-option label="精细化工园区" value="精细化工园区" />
                    <el-option label="化工新材料园区" value="化工新材料园区" />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="80" class="row-item">
              <el-col :span="8">
                <el-form-item label="区域面积（M²）：" label-position="top" prop="ZONE_AREA">
                  <el-input v-model="formData.ZONE_AREA" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区域位置：" label-position="top" prop="ZONE_LOCATION">
                  <el-input v-model="formData.ZONE_LOCATION" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="regionSubmit">确认</el-button>
          <el-button @click="closeRegionDialog">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog class="dialog-from" v-model="isDialogOpenSearch" title="人员授权" width="600" destroy-on-close align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <div v-for="(region, index) in newFormData" :key="index" class="region-item">
            <el-checkbox v-model="region.selected" @change="handleCheckboxChange(region)">{{ region.name
              }}</el-checkbox>
            <input type="datetime-local" v-model="region.startTime" :disabled="!region.selected"
              class="input-time mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            <input type="datetime-local" v-model="region.endTime" :disabled="!region.selected"
              class="input-time mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="regionSubmitStaff">确认</el-button>
          <el-button @click="closeRegionDialog">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog class="dialog-from" v-model="isDialogOpenCar" title="车辆授权" width="600" destroy-on-close align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <div v-for="(region, index) in newFormCarData" :key="index" class="region-item">
            <el-checkbox v-model="region.selected" @change="handleCheckboxChange(region)">{{ region.name
              }}</el-checkbox>
            <input type="datetime-local" v-model="region.startTime" :disabled="!region.selected"
              class="input-time mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            <input type="datetime-local" v-model="region.endTime" :disabled="!region.selected"
              class="input-time mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="regionSubmitCar">确认</el-button>
          <el-button @click="closeRegionDialog">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- View Details Dialog -->
    <Teleport to="body">
      <div v-if="isViewDialogOpen"
        class="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center">
        <div class="bg-card text-card-foreground p-5 rounded-lg shadow-xl w-[500px]">
          <h3 class="text-lg font-bold mb-4">查看授权详情</h3>
          <div v-if="viewingItem">
            <p><strong>人员编码：</strong>{{ viewingItem.staff_code }}</p>
            <p><strong>人员姓名：</strong>{{ viewingItem.staff_name }}</p>
            <p><strong>身份证号：</strong>{{ viewingItem.id_number }}</p>
            <p><strong>区域名称：</strong>{{ viewingItem.zone_name }}</p>
            <p><strong>授权类型：</strong>{{ viewingItem.authorization_type }}</p>
            <p><strong>开始时间：</strong>{{ formatDateTime(viewingItem.start_time) }}</p>
            <p><strong>结束时间：</strong>{{ formatDateTime(viewingItem.end_time) }}</p>
            <p><strong>授权状态：</strong>{{ viewingItem.authorization_status }}</p>
            <p><strong>授权原因：</strong>{{ viewingItem.reason }}</p>
            <p><strong>创建时间：</strong>{{ formatDateTime(viewingItem.created_at) }}</p>
            <p><strong>创建人：</strong>{{ viewingItem.created_by }}</p>
            <p><strong>更新时间：</strong>{{ formatDateTime(viewingItem.updated_at) }}</p>
            <p><strong>更新人：</strong>{{ viewingItem.updated_by }}</p>
          </div>
          <div class="mt-4 flex justify-end">
            <button @click="closeViewDialog" class="btn btn-secondary">关闭</button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue'
import axios from 'axios'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const apiBaseUrl = computed(() => {
  return proxy.$currentUrl + '/api/zone-authorization'
})
const apiStaffBaseUrl = computed(() => {
  return proxy.$currentUrl + '/api/personnel_management'
})
const apiCarBaseUrl = computed(() => {
  return proxy.$currentUrl + '/api/vehicleau_thorization'
})

const search = ref({
  staff_name: '',
  id_number: '',
  zone_name: '',
  authorization_status: ''
})


const selectAll = ref(false)
const isDialogOpen = ref(false)
const isDialogOpenSearch = ref(false)
const isDialogOpenCar = ref(false)
const isDialogType = ref('')
const isViewDialogOpen = ref(false)
const isEditing = ref(false)
const formData = ref({})
const formDataStaff = ref({})
const formDataCar = ref({})
const viewingItem = ref(null)

const displayedAuthorizations = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return authorizations.value.slice(start, end)
})
const authorizations = ref([])
const searchAuthorizations = async () => {
  try {
    const response = await axios.get(`${apiBaseUrl.value}/search`, { params: search.value })
    authorizations.value = response.data.map(item => ({ ...item, selected: false }))
  } catch (error) {
    console.error('搜索授权记录失败:', error)
    alert('搜索授权记录失败: ' + (error.response?.data?.message || error.message))
  }
}

const resetSearch = () => {
  search.value = {
    staff_name: '',
    id_number: '',
    zone_name: '',
    authorization_status: ''
  }
  searchAuthorizations()
}

const openAddDialog = () => {
  isDialogOpen.value = true
  isDialogType.value = 'add'
  isEditing.value = false
  formData.value = {
    ID: '',
    STAFF_CODE: '',
    ZONE_NAME: '',
    ZONE_TYPE: '',
    ZONE_AREA: '',
    ZONE_LOCATION: '',
  }
}

const closeDialog = () => {
  isDialogOpen.value = false
}
const formRef = ref(null)
const regionSubmit = async () => {
  try {
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (!formData.value.ID) {
          const response = await axios.post(`${apiBaseUrl.value}/add`, formData.value)
          alert(response.data.message || '创建分区区域成功')
        } else {
          const response = await axios.put(`${apiBaseUrl.value}/update/${formData.value.ID}`, formData.value)
          alert(response.data.message || '编辑分区区域成功')
        }
        closeRegionDialog()
        await searchRegion()
      }
    })
  } catch (error) {
    console.error('记录区域失败:', error)
    alert('记录区域失败: ' + (error.response?.data?.message || error.message))
  }
}
const regionSubmitStaff = async () => {
  try {
    const authorityZone = newFormData.value
      .filter(region => region.selected) // 只选择被选中的区域
      .map(region => ({
        staff_name: region.name,
        startTime: region.startTime,
        endTime: region.endTime,
        au_status: '已授权',
      }));
    const newData = { ...formDataStaff.value, personArray: JSON.stringify(authorityZone) }
    try {
      const response = await axios.post(`${apiStaffBaseUrl.value}/add/${newData.ID}`, newData)
      alert(response.message || '授权成功')
      closeRegionDialog()
      await searchStaff()
    } catch (error) {
      console.error('授权失败:', error)
      alert('授权失败: ' + (error.response?.data?.message || error.message))
    }
  } catch (error) {
    console.error('授权失败:', error)
    alert('授权失败: ' + (error.response?.data?.message || error.message))
  }
}
const regionSubmitCar = async () => {
  try {
    const authorityZone = newFormCarData.value
      .filter(region => region.selected) // 只选择被选中的区域
      .map(region => ({
        staff_name: region.name,
        startTime: region.startTime,
        endTime: region.endTime,
        au_status: '已授权',
      }));
    const newData = { ...formDataCar.value, CarArray: JSON.stringify(authorityZone) }
    try {
      const response = await axios.post(`${apiCarBaseUrl.value}/add/${newData.ID}`, newData)
      alert(response.message || '授权成功')
      closeRegionDialog()
      await searchCar()
    } catch (error) {
      console.error('授权失败:', error)
      alert('授权失败: ' + (error.response?.data?.message || error.message))
    }
  } catch (error) {
    console.error('授权失败:', error)
    alert('授权失败: ' + (error.response?.data?.message || error.message))
  }
}
const closeRegionDialog = () => {
  isDialogOpen.value = false
  isDialogOpenSearch.value = false
  isDialogOpenCar.value = false
}
const handleSubmit = async () => {
  try {
    if (isEditing.value) {
      await axios.put(`${apiBaseUrl.value}/${formData.value.id}`, formData.value)
    } else {
      await axios.post(apiBaseUrl.value, formData.value)
    }
    closeDialog()
    await searchAuthorizations()
  } catch (error) {
    console.error('提交授权失败:', error)
    alert('提交授权失败: ' + (error.response?.data?.message || error.message))
  }
}
const tableRef = ref(null)
const deleteSelected = async () => {
  // const selectedIds = authorizations.value.filter(item => item.selected).map(item => item.ID)
  // if (selectedIds.length === 0) {
  //   alert('请选择要删除的记录')
  //   return
  // }
  // if (confirm(`确定要删除选中的 ${selectedIds.length} 条记录吗？`)) {
  //   try {
  //     await Promise.all(selectedIds.map(id => axios.delete(`${apiBaseUrl.value}/${id}`)))
  //     alert('删除成功')
  //     await searchAuthorizations()
  //   } catch (error) {
  //     console.error('删除记录失败:', error)
  //     alert('删除记录失败: ' + (error.response?.data?.message || error.message))
  //   }
  // }
  try {
    if (selectedIds.value.length === 0) {
      alert('请至少选择一条记录进行删除')
      return
    }
    if (!confirm(`确定要删除选中的 ${selectedIds.value.length} 条记录吗？`)) {
      return
    }
    const deletePromises = selectedIds.value.map(item =>
      axios.delete(`${apiBaseUrl.value}/${item.ID}`)
    )
    await Promise.all(deletePromises)
    alert('删除成功')
    if (tableRef.value) {
      tableRef.value.clearSelection();
    }
    selectedIds.value = []
    await searchRegion()
    if (currentPage.value > totalPages.value) {
      currentPage.value = totalPages.value;
    }
    // await nextTick(); // 确保 DOM 更新
  }
  catch (error) {
    console.error('删除失败:', error)
    alert('删除失败: ' + (error.response?.data?.message || error.message))
  }
}

const editAuthorization = (item) => {
  formData.value = { ...item }
  isEditing.value = true
  isDialogOpen.value = true
}

const viewDetails = (item) => {
  viewingItem.value = { ...item }
  isViewDialogOpen.value = true
}

const closeViewDialog = () => {
  isViewDialogOpen.value = false
  viewingItem.value = null
}

const toggleSelectAll = () => {
  selectAll.value = !selectAll.value
  authorizations.value.forEach(item => item.selected = selectAll.value)
}

const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++
}
const prevPageStaff = () => {
  if (currentPageStaff.value > 1) currentPageStaff.value--
}

const nextPageStaff = () => {
  if (currentPageStaff.value < totalPagesStaff.value) currentPageStaff.value++
}
const prevPageStaffRecord = () => {
  if (currentPageStaffRecord.value > 1) currentPageStaffRecord.value--
}

const nextPageStaffRecord = () => {
  if (currentPageStaffRecord.value < totalPagesStaffRecord.value) currentPageStaffRecord.value++
}
const prevPageCar = () => {
  if (currentPageCar.value > 1) currentPageCar.value--
}

const nextPageCar = () => {
  if (currentPageCar.value < totalPagesCar.value) currentPageCar.value++
}
const prevPageCarRecord = () => {
  if (currentPageCarRecord.value > 1) currentPageCarRecord.value--
}

const nextPageCarRecord = () => {
  if (currentPageCarRecord.value < totalPagesCarRecord.value) currentPageCarRecord.value++
}

const getStatusClass = (status) => {
  return status === '已授权' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}

const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return ''
  const date = new Date(dateTimeString)
  return date.toLocaleString()
}

const batchAuthorize = async () => {
  const selectedItems = authorizations.value.filter(item => item.selected)
  if (selectedItems.length === 0) {
    alert('请选择要批量授权的记录')
    return
  }
  try {
    await axios.post(`${apiBaseUrl.value}/batch-authorize`, { authorizations: selectedItems })
    alert('批量授权成功')
    await searchAuthorizations()
  } catch (error) {
    console.error('批量授权失败:', error)
    alert('批量授权失败: ' + (error.response?.data?.message || error.message))
  }
}

const batchDeauthorize = async () => {
  const selectedIds = authorizations.value.filter(item => item.selected).map(item => item.id)
  if (selectedIds.length === 0) {
    alert('请选择要批量取消授权的记录')
    return
  }
  try {
    await axios.post(`${apiBaseUrl.value}/batch-deauthorize`, { ids: selectedIds })
    alert('批量取消授权成功')
    await searchAuthorizations()
  } catch (error) {
    console.error('批量取消授权失败:', error)
    alert('批量取消授权失败: ' + (error.response?.data?.message || error.message))
  }
}

const rowKey = (row) => row.id; // 设置行的唯一标识
// 表头样式
const headerCellStyle = {
  height: '30px', // 设置表头高度
  lineHeight: '30px', // 设置行高以垂直居中
  backgroundColor: '#f2f2f2', // 可选：设置背景颜色
  // fontSize: '16px', // 可选：设置字体大小
};
const rules = reactive({
  STAFF_CODE: [
    { required: true, message: '请输入区域编码', trigger: 'blur' },
  ],
  ZONE_NAME: [
    { required: true, message: '请输入区域名称', trigger: 'blur' },
  ],
  ZONE_TYPE: [
    { required: true, message: '请选择区域性质', trigger: 'change' },
  ],
  ZONE_AREA: [
    { required: true, message: '请输入区域面积（M²）', trigger: 'blur' },
  ],
  ZONE_LOCATION: [
    { required: true, message: '请输入区域位置', trigger: 'blur' },
  ],
})

const selectedIds = ref([])
const handleSelectionChange = (selected) => {
  selectedIds.value = selected;
};
const activeName = ref('区域管理')
const activeTwoName = ref('人员授权管理')
const activeThreeName = ref('人员授权记录')
const handleClick = (tab) => {
  allQuery()
}
const handleTwoClick = () => {
  if (activeTwoName.value == '人员授权管理') {
    searchStaff()
  } else if (activeTwoName.value == '车辆授权管理') {
    searchCar()
  }
}
const handleThreeClick = () => {
  if (activeThreeName.value == '人员授权记录') {
    searchStaffRecord()
  } else if (activeThreeName.value == '车辆授权记录') {
    searchCarRecord()
  }
}
const loading = ref(false)
const region = ref({
  STAFF_CODE: '',
  ZONE_NAME: '',
})
const staffRecord = ref({
  staff_code: '',
  staff_name: '',
  id_card: '',
})
const staff = ref({
  STAFF_CODE: '',
  STAFF_NAME: '',
  ID_CARD: '',
})
const carSquest = ref({
  LICENSE_PLATE: '',
  DRIVER_NAME: '',
})
const regionItems = ref([
  {
    label: '区域编码',
    model: 'STAFF_CODE',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '区域名称',
    model: 'ZONE_NAME',
    type: 'input',
    placeholder: '请输入',
  },
]);
const staffItems = ref([
  {
    label: '人员编码',
    model: 'STAFF_CODE',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '人员姓名',
    model: 'STAFF_NAME',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '证件号码',
    model: 'ID_CARD',
    type: 'input',
    placeholder: '请输入',
  },
]);
const carItems = ref([
  {
    label: '车牌号码',
    model: 'LICENSE_PLATE',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '驾驶人姓名',
    model: 'DRIVER_NAME',
    type: 'input',
    placeholder: '请输入',
  },
]);
const regionData = ref([])
const staffData = ref([])
const staffDataRecord = ref([])
const carData = ref([])
const carDataRecord = ref([])
const resetRegion = () => {
  region.value = {
    STAFF_CODE: '',
    ZONE_NAME: '',
  }
  searchRegion()
}
const resetStaff = () => {
  staff.value = {
    STAFF_CODE: '',
    STAFF_NAME: '',
    ID_CARD: '',
  }
  searchStaff()
}
const resetStaffRecord = () => {
  staff.value = {
    STAFF_CODE: '',
    STAFF_NAME: '',
    ID_CARD: '',
  }
  searchStaffRecord()
}
const resetCar = () => {
  carSquest.value = {
    LICENSE_PLATE: '',
    DRIVER_NAME: '',
  }
  searchCar()
}
const resetCarRecord = () => {
  carSquest.value = {
    LICENSE_PLATE: '',
    DRIVER_NAME: '',
  }
  searchCarRecord()
}
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = computed(() => regionData.value.length)
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))
const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)

const currentPageStaff = ref(1)
const pageSizeStaff = ref(10)
const totalItemsStaff = computed(() => staffData.value.length)
const totalPagesStaff = computed(() => Math.ceil(totalItemsStaff.value / pageSizeStaff.value))
const startIndexStaff = computed(() => (currentPageStaff.value - 1) * pageSizeStaff.value)

const currentPageStaffRecord = ref(1)
const pageSizeStaffRecord = ref(10)
const totalItemsStaffRecord = computed(() => staffDataRecord.value.length)
const totalPagesStaffRecord = computed(() => Math.ceil(totalItemsStaffRecord.value / pageSizeStaffRecord.value))
const startIndexStaffRecord = computed(() => (currentPageStaffRecord.value - 1) * pageSizeStaffRecord.value)

const currentPageCar = ref(1)
const pageSizeCar = ref(10)
const totalItemsCar = computed(() => carData.value.length)
const totalPagesCar = computed(() => Math.ceil(totalItemsCar.value / pageSizeCar.value))
const startIndexCar = computed(() => (currentPageCar.value - 1) * pageSizeCar.value)

const currentPageCarRecord = ref(1)
const pageSizeCarRecord = ref(10)
const totalItemsCarRecord = computed(() => carDataRecord.value.length)
const totalPagesCarRecord = computed(() => Math.ceil(totalItemsCarRecord.value / pageSizeCarRecord.value))
const startIndexCarRecord = computed(() => (currentPageCarRecord.value - 1) * pageSizeCarRecord.value)

const displayedRegionData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return regionData.value.slice(start, end)
})
const displayedStaffData = computed(() => {
  const start = (currentPageStaff.value - 1) * pageSizeStaff.value
  const end = start + pageSizeStaff.value
  return staffData.value.slice(start, end)
})
const displayedStaffDataRecord = computed(() => {
  const start = (currentPageStaffRecord.value - 1) * pageSizeStaffRecord.value
  const end = start + pageSizeStaffRecord.value
  return staffDataRecord.value.slice(start, end)
})
const displayedCarData = computed(() => {
  const start = (currentPageCar.value - 1) * pageSizeCar.value
  const end = start + pageSizeCar.value
  return carData.value.slice(start, end)
})
const displayedCarDataRecord = computed(() => {
  const start = (currentPageCarRecord.value - 1) * pageSizeCarRecord.value
  const end = start + pageSizeCarRecord.value
  return carDataRecord.value.slice(start, end)
})
// 查询区域
const searchRegion = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${apiBaseUrl.value}/search`, { params: region.value })
    regionData.value = response.data
    loading.value = false
  } catch (error) {
    console.error('搜索区域失败:', error)
    alert('搜索区域失败: ' + (error.response?.data?.message || error.message))
  }
}
// 查询人员
const searchStaff = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${apiStaffBaseUrl.value}/search`, { params: staff.value })
    staffData.value = response.data
    loading.value = false
  } catch (error) {
    console.error('搜索区域失败:', error)
    alert('搜索区域失败: ' + (error.response?.data?.message || error.message))
  }
}
// 查询人员记录
const searchStaffRecord = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${apiStaffBaseUrl.value}/record`, { params: staff.value })
    staffDataRecord.value = response.data
    loading.value = false
  } catch (error) {
    console.error('搜索区域失败:', error)
    alert('搜索区域失败: ' + (error.response?.data?.message || error.message))
  }
}
// 查询车辆
const searchCar = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${apiCarBaseUrl.value}/search`, { params: carSquest.value })
    carData.value = response.data
    loading.value = false
  } catch (error) {
    console.error('搜索区域失败:', error)
    alert('搜索区域失败: ' + (error.response?.data?.message || error.message))
  }
}
// 查询车辆记录
const searchCarRecord = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${apiCarBaseUrl.value}/record`, { params: carSquest.value })
    carDataRecord.value = response.data
    loading.value = false
  } catch (error) {
    console.error('搜索区域失败:', error)
    alert('搜索区域失败: ' + (error.response?.data?.message || error.message))
  }
}

const editItem = (item) => {
  isDialogType.value = 'edit'
  formData.value = { ...item }
  isDialogOpen.value = true
}
const authorizeItems = ref([{ regionName: '化工园区A' }, { regionName: '化工园区B' }]);
const staffFormDatas = ref([]);
const handleCheckboxChange = (region) => {
  // 当多选框状态改变时，更新对应的时间选择器的状态
  // region.selected = !region.selected;
};
const checkouts = ref([])
const newFormData = ref([])
const newFormCarData = ref([])
const authorize = async (item) => {
  formDataStaff.value = { ...item }
  region.value = {
    STAFF_CODE: '',
    ZONE_NAME: '',
  }
  // 解析 personArray
  let personArray = [];
  if (item.personArray) {
    try {
      personArray = item.personArray;
    } catch (error) {
      console.error("解析 personArray 时出错:", error);
    }
  }
  const checkoutData = await axios.get(`${apiBaseUrl.value}/search`, { params: region.value })
  // newFormData.value = checkoutData.data.map(region => ({ name: region.zone_name, startTime: '', endTime: '', selected: false }));
  // 设置 newFormData，判断选中状态并提取时间
  newFormData.value = checkoutData.data.map(region => {
    // 查找与当前区域名称匹配的项
    const matchedPerson = personArray.find(person => person.staff_name === region.ZONE_NAME);

    return {
      name: region.ZONE_NAME,
      startTime: matchedPerson ? matchedPerson.startTime : '', // 如果匹配则使用对应的 startTime
      endTime: matchedPerson ? matchedPerson.endTime : '',     // 如果匹配则使用对应的 endTime
      selected: !!matchedPerson, // 如果匹配则选中
    };
  });
  isDialogOpenSearch.value = true
}
const authorizeCar = async (item) => {
  formDataCar.value = { ...item }
  region.value = {
    STAFF_CODE: '',
    ZONE_NAME: '',
  }
  // 解析 CarArray
  let CarArray = [];
  if (item.CarArray) {
    try {
      CarArray = item.CarArray;
    } catch (error) {
      console.error("解析 CarArray 时出错:", error);
    }
  }
  const checkoutData = await axios.get(`${apiBaseUrl.value}/search`, { params: region.value })
  // newFormData.value = checkoutData.data.map(region => ({ name: region.zone_name, startTime: '', endTime: '', selected: false }));
  // 设置 newFormData，判断选中状态并提取时间
  newFormCarData.value = checkoutData.data.map(region => {
    // 查找与当前区域名称匹配的项
    const matchedPerson = CarArray.find(person => person.staff_name === region.ZONE_NAME);

    return {
      name: region.ZONE_NAME,
      startTime: matchedPerson ? matchedPerson.startTime : '', // 如果匹配则使用对应的 startTime
      endTime: matchedPerson ? matchedPerson.endTime : '',     // 如果匹配则使用对应的 endTime
      selected: !!matchedPerson, // 如果匹配则选中
    };
  });
  isDialogOpenCar.value = true
}
const staffFormData = reactive({})
onMounted(() => {
  allQuery()
})
const allQuery = () => {
  if (activeName.value == '区域管理') {
    searchRegion()
  } else if (activeName.value == '人员/车辆授权管理') {
    if (activeTwoName.value = '人员授权管理') {
      searchStaff()
    }
    else if (activeTwoName.value = '车辆授权管理') {
      searchCar()
    }
  } else if (activeName.value == '授权记录') {
    if (activeThreeName.value = '人员授权记录') {
      searchStaffRecord()
    } else if (activeThreeName.value = '车辆授权记录') {
      searchCarRecord()
    }
  }
}
</script>

<style scoped>
.input {
  @apply mt-1 block w-full rounded-md border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring;
}

.btn {
  @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out;
}

.btn-primary {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

.btn-destructive {
  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}

.checkbox {
  @apply h-4 w-4 text-primary focus:ring-primary border-input rounded;
}

.btn-sm {
  @apply px-2 py-1 text-sm;
}
</style>
<style scoped>
/* .input {
  @apply mt-1 block w-full rounded-md border-input bg-background shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50;
}

.btn {
  @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out;
}

.btn-primary {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

.btn-destructive {
  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}

.btn-sm {
  @apply px-2 py-1 text-sm;
}

.checkbox {
  @apply h-4 w-4 text-primary focus:ring-primary border-input rounded;
}

.table-header {
  @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider;
}

.table-cell {
  @apply px-6 py-4 whitespace-nowrap text-sm;
}

.btn-pagination {
  @apply relative inline-flex items-center px-4 py-2 border border-border text-sm font-medium;
}

/* 覆盖 Element Plus 的一些样式以匹配我们的主题 */
/* :deep(.el-dialog) {
  @apply bg-background text-foreground;
}

:deep(.el-dialog__header) {
  @apply bg-muted text-foreground;
}

:deep(.el-dialog__body) {
  @apply bg-background text-foreground;
}

:deep(.el-dialog__footer) {
  @apply bg-muted text-foreground;
} */
</style>
<style lass="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  /* 按钮居中对齐 */
}

.total-num {
  color: #02a7f0;
  font-size: 28px;
}

:deep(.dialog-from.el-dialog) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

:deep(.dialog-from .el-dialog__header) {
  padding: 11px 17px;
  background-color: #f2f2f2;
  font-size: 18px;
}

:deep(.dialog-from .el-dialog__body) {
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 20px;
}

.body-item {}

.box-title {
  margin-bottom: 10px;
}

:deep(.box-color) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #027db4;
  margin-right: 10px;
}

.box-content {
  /* height: 80px; */
}

.row-item {
  height: 80px;
  /* margin-bottom: 20px; */
}

.input-time {
  height: 30px;
  width: 150px;
  border-radius: 4px;
  margin-top: 0;
  box-shadow: 0 0 0 1px #dcdfe6;
}

.input-time:hover {
  box-shadow: 0 0 0 1px #c0c4cc;
}

.upload-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}

.upload-demo :deep(.el-upload) {
  width: 100%;
}

.input-upload {
  width: 100%;
}

.authorize-item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.region-item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
